<template>
  <Layout>
    <div>
        <!-- Page Header-->
        <header class="masthead" :style="{backgroundImage: `url(http://42.240.129.66:1337${general.cover.url})`}">
            <div class="container position-relative px-4 px-lg-5">
                <div class="row gx-4 gx-lg-5 justify-content-center">
                    <div class="col-md-10 col-lg-8 col-xl-7">
                        <div class="site-heading">
                            <h1>{{general.title}}</h1>
                            <span class="subheading">{{general.subtitle}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <!-- Main Content-->
        <div class="container px-4 px-lg-5">
            <div class="row gx-4 gx-lg-5 justify-content-center">
                <div class="col-md-10 col-lg-8 col-xl-7">
                    <!-- Post preview-->
                    <div class="post-preview" v-for="edge in $page.posts.edges" :key="edge.node.id">
                        <g-link  :to="'/post/'+edge.node.id">
                            <h2 class="post-title">{{edge.node.titile}}</h2>
                        </g-link>
                        <p class="post-meta">
                            Posted by
                            <a href="#!">{{edge.node.creatTime}}</a>
                            on{{edge.node.created_at}}
                        </p>
                        <p class="post-meta" >
                          <span v-for="tag in edge.node.tags" :key="tag.id">
                          <g-link :to="'/tag/'+tag.id"  >
                            {{tag.title}} 
                            &nbsp;&nbsp;
                          </g-link>
                        </span>
                        </p>
                    <hr class="my-4" />
                    </div>
                   <Pager :info="$page.posts.pageInfo"></Pager>
                </div>
            </div>
        </div>
       
    </div>
  </Layout>
</template>


<page-query>
query ($page:Int){
 	posts: allStrapiPost(perPage:4,page:$page) @paginate{
     pageInfo{
       totalPages
       currentPage
     }
    edges{
      node{
        id
        titile
        content
        creatTime
        created_at
        is_publish
        tags{
          id
          title
        }
        cover{
          id
          url
        }
      }
    }
  }
  general:allStrapiGeneral{
    edges{
      node{
        id
        title
        subtitle
        cover{
          url
        }
      }
    }

  }
}
</page-query>
<script>
import { Pager } from 'gridsome'

export default {
  name:'Home',
  components:{
    Pager
  },
  computed:{
    general(){
      return this.$page.general.edges[0].node
    }
  }
}
</script>

<style>

</style>
